<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>段页式计算器</title>
  <style>
    /* CSS样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding: 20px;
    }
    .container {
      max-width: 1200px; /* 设置最大宽度 */
      margin: 0 auto; /* 水平居中 */
      background-color: #fff; /* 设置背景颜色 */
      padding: 20px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    .result_container {
      max-width: 1150px; /* 设置最大宽度 */
      background-color: #fff; /* 设置背景颜色 */
      margin: 10px 0;
      padding: 10px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    input[type="text"] {
      width: 1080px;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      padding: 10px 20px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .input-and-button {
      display: flex;
      align-items: center;
    }
    .input-container {
      flex: 1;
      margin-right: 5px;
    }
    #result_title {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <a href='/'>返回首页<a><br>
    <h2>段页式计算器</h2>
    
    <div class="input-and-button">
      <div class="input-container">
        <input type="text" id="inputNumber" placeholder="请输入逻辑页号">
      </div>
      <button id="myButton" onclick="convertNumber()">计算</button>
    </div>
    <p style="color: grey;">计算结果:</p>
    <div class="result_container">
        <a id="result_title">逻辑页号： </a><a id="blockid"></a>
        <br>
        <br>
        <a id="result_title">Extent 类型： </a><a id="extent_type"></a>
        <br>
        <a id="result_title">Extent ID： </a><a id="extent_id"></a>
        <br>
        <a id="result_title">Extent offset： </a><a id="extent_offset"></a>
        <br>
        <a id="result_title">Block offset： </a><a id="block_offset"></a>
        <br>
        <br>
        <a id="result_title">BMT位置： </a><a id="bmt_pos"></a>

    </div>
  </div>
  <script>
    function convertNumber() {
        let inputNumber = document.getElementById('inputNumber').value;
        if (!/^[0-9]+$/.test(inputNumber)) {
            document.getElementById('blockid').innerText = `输入错误，请输入数字`;
            return;
        }
        
        // 逻辑页号
        let blockid = parseInt(inputNumber, 10);
        if (blockid < 0 || blockid > 2000000000) {
            document.getElementById('blockid').innerText = `暂不支持的blockid范围。[0, 2000000000]`;
            return;
        }
        document.getElementById('blockid').innerText = blockid;



        // extend信息：
        // extend类型：64k\1M\8M\64M
        // extendid： 第几个extend
        // 第几个type extend
        const EXT_SIZE_8_BOUNDARY = 16;
        const EXT_SIZE_8_TOTAL_PAGES = 128;
        const EXT_SIZE_8 = 8;
        
        const EXT_SIZE_128_BOUNDARY = 143;
        const EXT_SIZE_128_TOTAL_PAGES = 16384;
        const EXT_SIZE_128 = 128;
        
        const EXT_SIZE_1024_BOUNDARY = 255;
        const EXT_SIZE_1024_TOTAL_PAGES = 131072;
        const EXT_SIZE_1024 = 1024;
        
        const EXT_SIZE_8192 = 8192;
        
        
        let logic_id = blockid;
        let extent_type = '';
        let extent_id = 0;
        let extent_offset = 0;
        let block_offset = 0;

        if (logic_id < EXT_SIZE_8_TOTAL_PAGES) {
            extent_type = 'Extend size 64KB, Capacity 8 pages, File name 2';
            extent_id = Math.floor(logic_id / EXT_SIZE_8);
            extent_offset = extent_id;
            block_offset = logic_id % EXT_SIZE_8;
        } else if (logic_id < EXT_SIZE_128_TOTAL_PAGES) {
            extent_type = 'Extend size 1MB, Capacity 128 pages, File name 3';
            logic_id -= EXT_SIZE_8_TOTAL_PAGES;
            extent_offset = Math.floor(logic_id / EXT_SIZE_128);
            extent_id = EXT_SIZE_8_BOUNDARY + extent_offset;
            block_offset = logic_id % EXT_SIZE_128;
        } else if (logic_id < EXT_SIZE_1024_TOTAL_PAGES) {
            extent_type = 'Extend size 8MB, Capacity 1024 pages, File name 4';
            logic_id -= EXT_SIZE_128_TOTAL_PAGES;
            extent_offset = Math.floor(logic_id / EXT_SIZE_1024);
            extent_id = EXT_SIZE_128_BOUNDARY + extent_offset;
            block_offset = logic_id % EXT_SIZE_1024;
        } else {
            extent_type = 'Extend size 64MB, Capacity 8192 pages, File name 5';
            logic_id -= EXT_SIZE_1024_TOTAL_PAGES;
            extent_offset = Math.floor(logic_id / EXT_SIZE_8192);
            extent_id = EXT_SIZE_1024_BOUNDARY + extent_offset;
            block_offset = logic_id % EXT_SIZE_8192;
        }

        document.getElementById('extent_type').innerText = extent_type;
        document.getElementById('extent_id').innerText = extent_id;
        document.getElementById('extent_offset').innerText = extent_offset;
        document.getElementById('block_offset').innerText = block_offset;
        
        
        // BMT位置信息：
        // level0[]
        // level1[]->[]
        const level0_capacity = 1255;
        const level1_length = 256;
        const level1_capacity = 2000;
        if (extent_id < level0_capacity) {
            document.getElementById('bmt_pos').innerText = `SegmentHead.level0[${extent_id}].block_offset[${block_offset}]`;
        } else {
            let left_extends = extent_id - level0_capacity;
            
            let level1_id = Math.floor(left_extends / level1_capacity);
            let level1_0_id = left_extends % level1_capacity;
            document.getElementById('bmt_pos').innerText = `SegmentHead.level1[${level1_id}].level0[${level1_0_id}].block_offset[${block_offset}]`;
        }
    }

  </script>
</body>
</html>
